<template>
	<view>
		
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-navbar title="登录密码" back-icon-color="#000" :is-back="true" title-color="#000" :background="{ background:'#ffffff'}" :border-bottom="true"></u-navbar>
		<!-- #endif -->

		<view class="phone_box">
			<view class="nowphone">
				手机号：{{myphone}}
			</view>
			<view class="input_item">
				<u-input v-model="pass" type="password" :border="false" placeholder="数字、字母、符号组合不少于6位的新密码" />
			</view>
			<view class="input_item">
				<u-input v-model="pass2" type="password" :border="false" placeholder="确认新密码" />
			</view>
			<!--<view class="input_item">
				<u-input v-model="code" type="text" :border="false" placeholder="请输入手机验证码" />
				<view class="getCode" @tap="getCode">{{tips}}</view>
			</view>-->
			<view class="lijipay">
				<u-button hover-class="none" type="info" shape="circle" :ripple="false" @click="lipay()">确定</u-button>
			</view>
		</view>

		<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
		</u-verification-code>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				newphone: '',
				pass: '',
				pass2: '',
				code: '',


				tips: '',
				// refCode: null,
				seconds: 60,
				myphone:''
			}
		},
		onShow() {
			this.myphone = uni.getStorageSync('userinfo').username
		},
		methods: {
			lipay() {
				let that = this
				if (that.pass == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration: 2000
					})
				} else if (that.pass2 == '') {
					uni.showToast({
						title: '请确认密码',
						icon: 'none',
						duration: 2000
					})
				} else if (that.pass != that.pass2) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none',
						duration: 2000
					})
				} else {
					that.$api.UpdatelogonPassword({
						new_password: that.pass,
						re_password: that.pass2
					}).then(res => {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						})
						setTimeout(()=>{
							uni.navigateBack()
						},2000)
					}).catch(err => {
						uni.showToast({
							title: err.data.msg,
							icon: 'none',
							duration: 2000
						})
					})
				}

			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				//this.$u.toast('倒计时结束');
			},
			start() {
				//this.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style lang="scss">
	.phone_box {
		padding: 30rpx;

		.nowphone {
			font-weight: bold;
			font-size: 34rpx;
		}

		.input_item {
			border-radius: 200rpx;
			background-color: #f9f9f9;
			padding: 20rpx 40rpx;
			margin: 30rpx 0;
			position: relative;
			display: flex;
			align-items: center;
			u-input {
				flex: 1;
			}

			.getCode {
				//position: absolute;
				right: 0;
				top: 0;
				color: #0084FF;
			}
		}
	}

	.lijipay {
		width: 90%;
		margin-top: 100rpx;
		position: fixed;
		bottom: 2%;
		left: 0;
		right: 0;
		margin: 0 auto;

		.u-size-default {
			height: 80rpx !important;
			line-height: 80rpx !important;
			background-image: linear-gradient(to right, #FE9400, #FF3D22) !important;
			color: #fff;
		}
	}
</style>
